<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/icon.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/btn.css" />
<link rel="stylesheet" href="${aier_css_url}social/classes/classhomepage.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/fancybox.css">
<link rel="stylesheet" href="${aier_css_url}social/user/userCenter/usercenter.css">

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}social/user/fancybox.js"></script>

</head>
<body>

	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user"
		executeResult="true"></s:action>

	<div class="window-content">
		<!-- 正文 -->
		<div class="wrap wrap-class-center">
			<!-- class topBg -->
			<s:action name="ccomm_classesHTitle" namespace="/classes"
				executeResult="true"></s:action>
			<!-- main -->

			<div class="wrap-main">
				<!-- 中间导航栏 -->
				<div class="wrap-main-nav">
					<ul class="float-list clearfix">
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classHomePage.shtml?cid=${cid}">作业栏</a>
						</li>
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classesAlbum.shtml?cid=${cid}">班级风采</a>
						</li>
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classesBoast.shtml?cid=${cid}">夸一夸</a>
						</li>
						<li><a class="class-center-tag current last-has-border" 
						    href="${aier_url}classes/classeshome_classesPhotos.shtml?cid=${cid}">班级相册</a>
						</li>
					</ul>
				</div>

				<!-- 相册 -->
				<div class="wrap-main-column clearfix">
					<div class="upload-photo-bar">
						<a href="javascript:;" class="btn-orange-2" id="btnUploadAlbum"><span>上传照片</span>
						</a>
					</div>

                    <!-- 该相册路径 -->
                    <div class="pathbar-album">
                        <a><span>${classes.cname }</span>的相册</a> <span>&gt;</span> <a>${cpt.pname
                            }</a>
                    </div>
                    <!-- 相册内图片列表 -->
					<div id="upiListDiv" class="list-images clearfix">
                        
                    </div>
                    <div id="dialogDeleteImage" class="dialog-delete-image"
                        title="删除图片" style="display:none;">
                        <p>确认删除吗?</p>
                    </div>
				</div>
				<!-- end 相册 -->
			</div>
			<!-- 返回顶部 -->
			<s:action name="userhomecomm_backToTop" namespace="/user"
				executeResult="true"></s:action>
			<!-- end 返回顶部 -->
		</div>
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>


	<!-- 相册图片上传dialog -->
	<div id="dialogUploadAlbum" class="upload-albumn-picture"
		style="display:none;" title="上传图片到相册">
		<div class="board">
			<!-- 选择上传相册 -->
			<div class="select-bar clearfix	">
				<div class="upload-to">上传到：相册${cpt.pname}</div>
			</div>
			<!-- /选择上传相册 -->

			<!-- 上传图片面板 -->
			<div class="upload-board-1">
				<!-- 点击上传 -->
				<!-- <div class="start-upload-btn">点击上传图片</div>-->
				<!-- /点击上传 -->

				<!-- 预览模式 -->
				<!-- <div class="upload-temp-preview" style="display:none;"></div>-->
				<!-- /预览模式 -->

				<img class="area-img" id="areaImg" style="display: none;">
				<div id="reselect2" onclick="delfile2();" class="start-upload-btn" style="cursor: pointer;display: none;">重新选择</div>
				<input class="input_opacity" type="file" id="file2" name="file2">
				<label id="upPic2" class="start-upload-btn" style="cursor:pointer;"
					for="file2"><a class="start-upload-btn" id="b_selfile"
					href="javascript:;">点击上传图片 </a> </label>
			</div>
			<!-- /上传图片面板 -->
		</div>
	</div>
</body>
<script type="text/javascript">
var cptid = "${cpt.cptid}";
$(document).ready(function(){
	$('.fancybox-thumbs').fancybox();

	$('.fancybox-thumbs').fancybox({
		prevEffect : 'none',
		nextEffect : 'none',
		closeBtn  : false,
		arrows    : false,
		nextClick : true,
		helpers : {
			thumbs : {
				width  : 50,
				height : 50
			}
		}
	});
});

$(window).bind('scroll', function(){
	var a = $(this).scrollTop(),
		b = $(this).outerHeight();
	if ( a > 100 ) {
		$('#btt').css({'display':'block','top':a+b-200});
	} else {
		$('#btt').css('display','none');
	}
});

// 预览图和完整图切换
$('.zoom-out,.collapse-btn').click(function(){
	$(this).parents('.xxs-extend').css('display','none')
	.prev('.xxs-media-pre').css('display','block');
});
$('.zoom-in').click(function(){
	$(this).parents('.xxs-media-pre').css('display','none')
	.next('.xxs-extend').css('display','block');
});



$('#dialogUploadAlbum').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
    hide : "fade",
	width : "530",
	height : "660",
	buttons: {
		"确定": function() {
			var fun = function(data) {
				if(1==data.s){
					
					$('#file2').show();
					$('#upPic2').show();
					$('#areaImg').hide();
					$('#reselect2').hide();
					
					imgName = "";
					loadImgTypeImg();
					$().message("照片添加成功");
					$('#dialogUploadAlbum').dialog("close");
				}
			};
			exeAjax(
					ajaxUrl("${aier_url}${aier_urijs}classesalbum_addClassPhotoImg${aier_suffix}"),
					fun, {
						"cptid" : cptid,
						"img" : imgName
					});

		},"取消": function() {
			$( this ).dialog( "close" );
		}
	}
});

$('#btnUploadAlbum').click(function(){
	$('#dialogUploadAlbum').dialog('open');
});


//上传照片
//上传文件
	var imgName = "";
	function upfile2() {
		var pName = $("#file2").val().split("\\")[2];
		if (isnull(pName)) {
			$().message("请选择图片！");
			return;
		}
		var pname1 = pName.substring(pName.lastIndexOf('.')).toLowerCase();
		try {
			$.ajaxFileUpload({
						url : "${aier_url}${aier_urijs}classesalbum_uploadClassPhotoImg${aier_suffix}?photoName="
								+ pname1,
						secureuri : false,
						fileElementId : 'file2',
						dataType : 'json',
						success : function(data, status) {
							$('#file2').hide();
							$('#upPic2').hide();
							$('#areaImg').show();
							$('#reselect2').show();
							$('#areaImg').attr("src", "${classgal_get_url}origin/" + data.img);
							imgName = data.img;
						},
						error : function(data, status, e) {
							$().message("服务器连接超时");
						}
					});
		} catch (e) {
			$().message("服务器连接超时");
		}
		
	}
	
	//重新选择图片
	function delfile2() {
		var fun = function(data) {
			if (data.s == 1) {
				$('#file2').show();
				$('#upPic2').show();
				$('#areaImg2').hide();
				$('#reselect2').hide();
				
				imgName = "";
			} else {
				$().message("删除失败，请稍后再试！");
			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}classesalbum_deleteUploadImg${aier_suffix}"),
				fun, {
					"img" : imgName
				});
	}

	$("#file2").live('change', function() {
		upfile2();
	});
	

	//加载相册照片
    function loadImgTypeImg(){
        var fun = function(data) {
        	var temp = "";
            if(!isnull(data.cpiList)){
                var cpiList = data.cpiList;
                
                for(var i=0;i<cpiList.length;i++){
                    temp +="<div class='t-image'><a class='fancybox-thumbs' data-fancybox-group='thumb' href='${classgal_get_url}big/"+cpiList[i].img+"'><img src='${classgal_get_url}small/"+cpiList[i].img+"'></a><span class='t-delete' onclick='delTel("+cpiList[i].cpiid+");'></span></div>";
                }
            }
            $("#upiListDiv").html(temp);
        };
        exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}classesalbum_searchClassPhotoImg_type${aier_suffix}"),
                fun, {
                    "cptid" : cptid
                });
    }
    loadImgTypeImg();

function delTel(cpiid){
    $(function() {$("#dialogDeleteImage").dialog({
       modal: true,
       resizable: false,
       buttons: {
           "删除": function() {
               var fun = function(data) {
                   $("#dialogDeleteImage").dialog("close");
                   loadImgTypeImg();
               };
               exeAjax(ajaxUrl("${aier_url}${aier_urijs}classesalbum_deleteClassPhotoImg${aier_suffix}"), fun, 
                   {"cpiid" : cpiid});
           },"取消": function() {
               $(this).dialog("close");
           }
       }
       });
   });
}
</script>
</html>